<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
    <!-- 搜索框结束 -->
    <!-- 图片区域 -->
    <div class="image">
      <!-- <img :src="top_ti.img" /> -->
      <!-- <img  v-lazy="top_ti[0].img"/> -->
      <img src="../../assets/img/gl/china/banner4.jpeg" alt />
      <div class="image1">
        <span>{{ top_ti.title }}</span>
      </div>
    </div>
    <!-- 图片区域结束 -->
    <!-- 热门目的地 -->
    <div class="rm">
      <div class="rm_top">
        <h2>{{ top_ti.title1 }}</h2>
      </div>
      <div class="rm_botm"></div>
      {{ top_ti.title2 }}
    </div>

    <!-- 热门目的地结束 -->

    <!-- 导航栏滑动开始 -->
    <div class="navbar">
      <van-tabs v-model="active">
        <van-tab
          v-for="(item, index) of zgl_list"
          :key="index"
          :title="item.title"
        >
          <!-- 国内内容开始 -->
          <div class="navbar1">
            <!-- 前3条的信息  -->
            <van-row type="flex" justify="space-around">
              <van-col
                span="6"
                v-for="(value, index) of zgl_banner"
                :key="index"
              >
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />
                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
            <van-row type="flex" justify="space-around">
              <van-col span="6" v-for="(value, index) of zgl_end" :key="index">
                <!-- <img :src="item.imag"/> -->
                <!-- 懒加载 -->
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />

                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
          </div>
          <!-- 国内内容结束 -->
        </van-tab>
      </van-tabs>
    </div>
    <!-- 导航栏滑动结束-->
    <!-- 更多目的地 -->
    <div class="mudi">
      <div class="btn">
        <van-cell is-link @click="showPopup">{{ top_ti.title3 }}</van-cell>
        <van-popup v-model="show" position="top" :style="{ height: '30%' }"
          >暂无更多</van-popup
        >
      </div>
      <!-- <h1>{{tab_s}}</h1> -->
      <!-- <h1>{{zgl_banner}}</h1> -->
    </div>
    <!-- 主题精选结束 -->
    <!-- 分割线段 -->
    <!-- 分割线段结束 -->

    <!-- ----------------------------------------------------当季推荐 -->

    <!-- 热门目的地 -->
    <div class="rm">
      <div class="rm_top">
        <h2>
          <router-link to>{{ djtj_top.title }}</router-link>
        </h2>
      </div>
      <div class="rm_botm">{{ djtj_top.title1 }}</div>
    </div>

    <!-- 热门目的地结束 -->

    <!-- 导航栏滑动开始 -->
    <div class="navbar">
      <van-tabs v-model="active1">
        <van-tab
          v-for="(item, index) of zgl_dangji"
          :key="index"
          :title="item.title"
        >
          <!-- 国内内容开始 -->
          <div class="navbar1">
            <!-- 前3条的信息  -->
            <van-row type="flex" justify="space-around">
              <van-col
                span="6"
                v-for="(value, index) of dj_banner"
                :key="index"
              >
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />
                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
            <van-row type="flex" justify="space-around">
              <van-col span="6" v-for="(value, index) of dj_end" :key="index">
                <!-- <img :src="item.imag"/> -->
                <!-- 懒加载 -->
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />

                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
          </div>
          <!-- 国内内容结束 -->
        </van-tab>
      </van-tabs>
    </div>
    <!-- 导航栏滑动结束-->
    <!-- 更多目的地 -->
    <div class="mudi">
      <div class="btn">
        <van-cell is-link @click="showPopup">{{ djtj_top.title2 }}</van-cell>
        <van-popup v-model="show" position="top" :style="{ height: '30%' }"
          >暂无更多</van-popup
        >
      </div>
      <!-- <h1>{{tab_s}}</h1> -->
      <!-- <h1>{{zgl_banner}}</h1> -->
    </div>
    <!-- 主题精选结束 -->
    <!-- 分割线段 -->
    <!-- 分割线段结束 -->

    <!-- --------------------------------------------------------------当季推荐结束 -->
    <!-- ---------------------------------------------------主题精选开始 -->

    <!-- 热门目的地 -->
    <div class="rm">
      <div class="rm_top">
        <h2>
          <router-link to>{{ ztjx_top.title }}</router-link>
        </h2>
      </div>
      <div class="rm_botm">{{ ztjx_top.title1 }}</div>
    </div>

    <!-- 热门目的地结束 -->

    <!-- 导航栏滑动开始 -->
    <div class="navbar">
      <van-tabs v-model="active2">
        <van-tab
          v-for="(item, index) of zgl_jxbanner"
          :key="index"
          :title="item.title"
        >
          <!-- 国内内容开始 -->
          <div class="navbar1">
            <!-- 前3条的信息  -->
            <van-row type="flex" justify="space-around">
              <van-col
                span="6"
                v-for="(value, index) of jx_banner"
                :key="index"
              >
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />
                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
            <van-row type="flex" justify="space-around">
              <van-col span="6" v-for="(value, index) of jx_end" :key="index">
                <!-- <img :src="item.imag"/> -->
                <!-- 懒加载 -->
                <router-link :to="`/zgldetails/${value.in_lid}`">
                  <img v-lazy="value.imag" />

                  <p class="p">{{ value.title }}</p>
                </router-link>
              </van-col>
            </van-row>
          </div>
          <!-- 国内内容结束 -->
        </van-tab>
      </van-tabs>
    </div>
    <!-- 导航栏滑动结束-->
    <!-- 更多目的地 -->
    <div class="mudi">
      <div class="btn">
        <van-cell is-link @click="showPopup">{{ ztjx_top.title2 }}</van-cell>
        <van-popup v-model="show" position="top" :style="{ height: '30%' }">
          <br />
          <br />暂无更多
        </van-popup>
      </div>

      <!-- <h1>{{tab_s}}</h1> -->
      <!-- <h1>{{zgl_banner}}</h1> -->
    </div>
    <!-- 主题精选结束 -->
    <!-- 分割线段 -->
    <!-- 分割线段结束 -->

    <!-- --------------------------------------------------主题精选结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      active1: 0,
      active2: 0,
      value: "",
      show: false,
      // 保存头部的图片返回的信息
      top_ti: {},

      // 选项卡数据
      zgl_list: [],
      // 选项卡下内容 前3条的信息
      zgl_banner: [],
      //选项卡下内容 后3条的信息
      zgl_end: [],
      //  当季推荐头部
      djtj_top: {},
      // 当季推荐的选项卡
      zgl_dangji: [],
      // 当季推荐选项卡下内容 前3条的信息
      dj_banner: [],
      //当季推荐选项卡下内容 后3条的信息
      dj_end: [],
      //  主题精选头部
      ztjx_top: {},
      // 主题精选的选项卡
      zgl_jxbanner: [],
      // 主题精选的tab选项卡下的前3条内容

      jx_banner: [],
      // 主题精选的tab选项卡下的后3条内容

      jx_end: [],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
  watch: {
    active() {
      (this.zgl_banner = []),
        (this.zgl_end = []),
        this.$axios.get("/zgl_banner?lid=" + this.active).then((res) => {
          let tab = res.data.results;
          var [p1, p2, p3] = tab;

          this.zgl_banner.push(p1, p2, p3);
          // 找攻略的tab选项卡下的后3条内容
          this.zgl_end = tab.splice(-3, 3);
        });
      // 找攻略的tab选项卡下的内容结束
    },
    // 当季推荐的监听
    active1() {
      // 当即推荐的tab选项卡下的前3条内容
      (this.dj_banner = []),
        (this.dj_end = []),
        this.$axios.get("/zgl_djcontainer?lid=" + this.active1).then((res) => {
          let tab = res.data.results;
          var [p1, p2, p3] = tab;

          this.dj_banner.push(p1, p2, p3);
          // 当即推荐的tab选项卡下的后3条内容
          this.dj_end = tab.splice(-3, 3);
        });
      // 当即推荐的tab选项卡下的内容结束
    },
    // 主题精选的监听
    active2() {
      // 主题精选的tab选项卡下的前3条内容
      (this.jx_banner = []),
        (this.jx_end = []),
        this.$axios.get("/zgl_jxbanner?lid=" + this.active2).then((res) => {
          let tab = res.data.results;
          var [p1, p2, p3] = tab;

          this.jx_banner.push(p1, p2, p3);
          //  主题精选的tab选项卡下的后3条内容
          this.jx_end = tab.splice(-3, 3);
        });
      //  主题精选的tab选项卡下的内容结束
    },
  },
  mounted() {
    // 选项卡下内容 前3条的信息
    (this.zgl_banner = []),
      // 选项卡下内容 后3条的信息
      (this.zgl_end = []),
      // 头部---------------
      this.$axios.get("/zgl?lid=1").then((res) => {
        this.top_ti = res.data.results[0];
      });
    // 头部结束------------
    // 找攻略的tab选项卡的数据开始

    this.$axios.get("/zgl_list").then((res) => {
      this.zgl_list = res.data.results;
    });

    // 找攻略的tab选项卡的数据结束
    // 找攻略的tab选项卡下的前3条内容
    this.$axios.get("/zgl_banner?lid=" + this.active).then((res) => {
      let tab = res.data.results;
      var [p1, p2, p3] = tab;

      this.zgl_banner.push(p1, p2, p3);
      // 找攻略的tab选项卡下的后3条内容
      this.zgl_end = tab.splice(-3, 3);
    });
    // 找攻略的tab选项卡下的内容结束

    // -----------------------------------------------------------------

    // 当季推荐 头部---------------
    this.$axios.get("/djtj_top?lid=1").then((res) => {
      this.djtj_top = res.data.results[0];
    });
    //  当季推荐头部结束------------

    // 当季推荐tab选项卡的数据

    this.$axios.get("/zgl_dangji").then((res) => {
      this.zgl_dangji = res.data.results;
    });

    // 当季推荐tab选项卡的数据结束
    // 当即推荐的tab选项卡下的前3条内容

    this.$axios.get("/zgl_djcontainer?lid=" + this.active1).then((res) => {
      let tab = res.data.results;
      var [p1, p2, p3] = tab;

      this.dj_banner.push(p1, p2, p3);
      // 当即推荐的tab选项卡下的后3条内容
      this.dj_end = tab.splice(-3, 3);
    });
    // 当即推荐的tab选项卡下的内容结束
    // ---------------------------------------------------------------

    // 主题精选--------------------------------

    //  主题精选 头部---------------
    this.$axios.get("/ztjx_top?lid=1").then((res) => {
      this.ztjx_top = res.data.results[0];
    });
    //   主题精选头部结束------------
    // 主题精选tab选项卡的数据

    this.$axios.get("/zgl_jingx").then((res) => {
      this.zgl_jxbanner = res.data.results;
    });

    // 主题精选tab选项卡的数据结束
    // 主题精选的tab选项卡下的前3条内容

    this.$axios.get("/zgl_jxbanner?lid=" + this.active2).then((res) => {
      let tab = res.data.results;
      var [p1, p2, p3] = tab;

      this.jx_banner.push(p1, p2, p3);
      // 主题精选的tab选项卡下的后3条内容
      this.jx_end = tab.splice(-3, 3);
    });
    // 主题精选的tab选项卡下的内容结束

    //主题精选结束
  },
};
</script>
<style>
/* <!-- 分割线段 --> */
.fgx {
  width: 100%;
  height: 1px;
  background: black;
}
/* <!-- 分割线段结束 --> */
/* 更多目的地 */
.btn {
  width: 100%;
  height: 44px;
  text-align: center;
  line-height: 44px;
}
.btn a {
  border: 1px solid red;
  display: block;
  width: 171px;
  height: 41px;
  margin: 0 auto;
  color: #ff9d00;
  border: 1px solid #ff9d00;
  border-radius: 3px;
}
.mudi {
  padding: 0px 15px 25px;
}
/* 更多目的地结束 */

/* 导航栏内容区域开始 */
.navbar img {
  width: 112px;
  height: 93px;
  /* padding: 0px 5px; */
}
.navbar1 {
  text-align: center;
  padding: 10px 30px 0px 5px;
}
.jj {
  margin: 0px 25px;
}
.p {
  display: block;
  padding: 10px 0 25px;
}

/* 导航栏内容区域结束   */

/* 热门目的地开始 */
.rm {
  padding: 33px 0px 28px;
  text-align: center;
}
.rm_top {
  padding-bottom: 10px;
  color: #111111;
  font-size: 15px;
}
.rm_botm {
  color: #999999;
}
/* 热门目的地结束 */
/* 图片区域结束  */
.image {
  position: relative;
  /* height: 164.39px;
    width: 100%; */
}
.image img {
  /* position: absolute; */
  height: 164.39px;
  width: 100%;
}
.image1 {
  width: 100%;
  padding: 17px 17px 17px 17px;
  position: absolute;
  top: 100px;
}
.image1 span {
  display: block;
  text-align: center;
  /* background: pink; */
  font-size: 19px;
  color: white;
  max-width: 301px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
}
/* 图片区域结束 */
/* 头部开始 */
.tab1 img {
  float: left;
  padding: 5px;
  width: 95px;
  height: 39px;
}
.gw {
  height: 39px;
  line-height: 39px;
  float: left;
  font-size: 16px;
  margin-left: 27px;
}
.k {
  float: left;
  width: 1px;
  height: 10px;
  margin: 13px 0 10px 10px;
  background: black;
}
.tab2 {
  display: flex;
  flex-wrap: nowrap;
}
.tab2 img {
  width: 24px;
  margin: 5px 15px;
}
/* 头部结束 */
</style>
